import { useState, useEffect } from 'react';
import { ArrowRight } from 'lucide-react';
import { RitualQuiz } from '../components/RitualQuiz';
import { setPageTitle } from '../lib/utils';

export function TheRitual() {
  const [showQuiz, setShowQuiz] = useState(false);
  const [activeTestimonialIndex, setActiveTestimonialIndex] = useState(0);

  useEffect(() => {
    setPageTitle('The Ritual');
  }, []);
  const rituals = [{
    title: 'Morning Glow Ritual',
    description: 'Start your day with intention and radiance. This gentle morning routine combines skincare and mindfulness for a balanced beginning.',
    steps: ['Begin with a gentle cleanser to refresh your skin', 'Apply a vitamin C serum for protection and brightness', 'Hydrate with a lightweight moisturizer', 'Take 5 minutes for mindful breathing or stretching'],
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    products: [{
      name: 'Gentle Cleansing Milk',
      price: 28
    }, {
      name: 'Vitamin C Brightening Serum',
      price: 52
    }, {
      name: 'Hydrating Day Cream',
      price: 42
    }]
  }, {
    title: 'Evening Renewal Ritual',
    description: "Unwind and restore with this evening practice. Release the day's tension and prepare your skin for overnight renewal.",
    steps: ['Double cleanse to remove makeup and impurities', 'Apply a treatment serum or facial oil', 'Use a jade roller for lymphatic drainage', 'Finish with a nourishing night cream', 'Practice gratitude reflection before sleep'],
    image: 'https://images.unsplash.com/photo-1470259078422-826894b933aa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    products: [{
      name: 'Cleansing Oil',
      price: 34
    }, {
      name: 'Nourishing Face Oil',
      price: 56
    }, {
      name: 'Jade Facial Roller',
      price: 32
    }, {
      name: 'Overnight Repair Cream',
      price: 48
    }]
  }, {
    title: 'Weekly Reset Ritual',
    description: 'Take time for deeper self-care with this weekly ritual. Exfoliate, mask, and reset both your skin and mind.',
    steps: ['Exfoliate to remove dead skin cells', "Apply a treatment mask for your skin's needs", 'Take a warm bath with essential oils', 'Practice a 15-minute meditation', 'Set intentions for the coming week'],
    image: 'https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    products: [{
      name: 'Gentle Exfoliating Scrub',
      price: 32
    }, {
      name: 'Hydrating Mask',
      price: 38
    }, {
      name: 'Lavender Bath Salts',
      price: 26
    }, {
      name: 'Aromatherapy Diffuser',
      price: 68
    }]
  }];
  const testimonials = [{
    quote: 'Incorporating the Morning Glow Ritual into my daily routine has transformed not just my skin, but my entire approach to the day. I feel more centered and my skin has never looked better.',
    author: 'Emma S.',
    image: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }, {
    quote: "The Evening Renewal Ritual has become my favorite part of the day. It's my time to reconnect with myself and care for my skin. The results have been amazing.",
    author: 'Elise T.',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }, {
    quote: "I've struggled with consistency in my self-care routine until I discovered RitualGlow. The Weekly Reset Ritual has become a sacred practice that I look forward to.",
    author: 'Sophia L.',
    image: 'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }, {
    quote: 'As someone with a hectic schedule, I was skeptical about adding more steps to my routine. But these rituals have actually simplified my life and improved my wellbeing dramatically.',
    author: 'Alex K.',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }, {
    quote: 'The Weekly Reset Ritual has helped me manage my stress levels and create boundaries between work and personal time. My skin is clearer and I sleep better too!',
    author: 'Maya J.',
    image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }, {
    quote: "I gifted the Morning Glow Ritual bundle to my mother, and now we both start our days with this beautiful practice. It's become a special connection between us, despite living in different cities.",
    author: 'James T.',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80'
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="relative">
        <div className="h-[60vh] bg-cover bg-center" style={{
        backgroundImage: 'url(https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80)'
      }}></div>
        <div className="absolute inset-0 bg-black/30 flex flex-col justify-center items-center text-center px-4">
          <h1 className="font-serif text-3xl md:text-5xl text-white mb-4 max-w-3xl">
            The Art of Ritual
          </h1>
          <p className="text-white/90 text-base md:text-lg mb-8 max-w-2xl">
            Transform your daily routines into meaningful rituals that nourish
            your skin, calm your mind, and restore your spirit.
          </p>
        </div>
      </div>
      {/* Introduction */}
      <div className="max-w-3xl mx-auto px-4 md:px-8 py-16 text-center">
        <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a] mb-6">
          Rituals vs. Routines
        </h2>
        <p className="text-base leading-relaxed mb-8">
          A routine is something you do regularly; a ritual is how you do it. By
          transforming your skincare and wellness routines into mindful rituals,
          you create moments of presence and self-care in your day. Each ritual
          we've designed combines effective products with mindful practices to
          nurture both inner and outer beauty.
        </p>
        <div className="h-px w-24 bg-[#e8e5e0] mx-auto"></div>
      </div>
      {/* Ritual Sections */}
      <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12">
        {rituals.map((ritual, index) => <div key={index} className={`flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} gap-8 md:gap-12 mb-20`}>
            <div className="md:w-2/5">
              <div className="h-72 md:h-full bg-cover bg-center rounded-lg" style={{
            backgroundImage: `url(${ritual.image})`
          }}></div>
            </div>
            <div className="md:w-3/5">
              <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a] mb-4">
                {ritual.title}
              </h2>
              <p className="text-base leading-relaxed mb-6">
                {ritual.description}
              </p>
              <h3 className="font-medium text-lg mb-3">The Ritual</h3>
              <ol className="list-decimal pl-5 mb-8 space-y-2">
                {ritual.steps.map((step, i) => <li key={i} className="text-sm md:text-base">
                    {step}
                  </li>)}
              </ol>
              <h3 className="font-medium text-lg mb-3">Recommended Products</h3>
              <div className="bg-[#f3f0eb] p-6 rounded-lg mb-6">
                <ul className="space-y-3">
                  {ritual.products.map((product, i) => <li key={i} className="flex justify-between items-center">
                      <span className="text-sm md:text-base">
                        {product.name}
                      </span>
                      <span className="font-medium">${product.price}</span>
                    </li>)}
                </ul>
                <div className="mt-6 pt-4 border-t border-[#e8e5e0]">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">Ritual Bundle Price</span>
                    <span className="font-medium text-[#4a6b60]">
                      $
                      {ritual.products.reduce((sum, product) => sum + product.price, 0) * 0.85}
                      <span className="text-sm text-gray-500 ml-2 line-through">
                        $
                        {ritual.products.reduce((sum, product) => sum + product.price, 0)}
                      </span>
                    </span>
                  </div>
                </div>
              </div>
              <button className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
                Shop This Ritual
              </button>
            </div>
          </div>)}
      </div>
      {/* Testimonials */}
      <div className="bg-[#f3f0eb] py-16 px-4 md:px-8 lg:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="font-serif text-2xl md:text-3xl text-center text-[#4a4a4a] mb-12">
            Ritual Stories
          </h2>
          <div className="relative">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {testimonials.slice(activeTestimonialIndex, activeTestimonialIndex + 3).map((testimonial, index) => <div key={index} className="bg-white p-6 rounded-lg shadow-sm flex flex-col h-full">
                    <div className="flex-grow mb-6">
                      <p className="text-base italic leading-relaxed">
                        "{testimonial.quote}"
                      </p>
                    </div>
                    <div className="flex items-center mt-auto">
                      <img src={testimonial.image} alt={testimonial.author} className="w-10 h-10 rounded-full object-cover mr-3 flex-shrink-0" />
                      <span className="font-medium">{testimonial.author}</span>
                    </div>
                  </div>)}
            </div>
            <div className="flex justify-center mt-8 items-center space-x-4">
              <button onClick={() => setActiveTestimonialIndex(Math.max(0, activeTestimonialIndex - 3))} disabled={activeTestimonialIndex === 0} className={`p-2 rounded-full border border-[#4a6b60] ${activeTestimonialIndex === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#4a6b60] hover:text-white'}`} aria-label="View previous testimonials">
                <ArrowRight size={16} className="rotate-180" />
              </button>
              <button onClick={() => setActiveTestimonialIndex(Math.min(testimonials.length - 3, activeTestimonialIndex + 3))} disabled={activeTestimonialIndex >= testimonials.length - 3} className={`p-2 rounded-full border border-[#4a6b60] ${activeTestimonialIndex >= testimonials.length - 3 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#4a6b60] hover:text-white'}`} aria-label="View more testimonials">
                <ArrowRight size={16} />
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* CTA Section */}
      <div className="bg-[#4a6b60] text-white py-16 px-4 md:px-8 lg:px-12 text-center">
        <div className="max-w-3xl mx-auto">
          <h2 className="font-serif text-2xl md:text-3xl mb-4">
            Create Your Personal Ritual
          </h2>
          <p className="text-white/90 mb-8">
            Not sure where to start? Take our ritual quiz to discover
            personalized recommendations based on your skin type, concerns, and
            lifestyle.
          </p>
          <button onClick={() => setShowQuiz(true)} className="bg-white text-[#4a6b60] hover:bg-[#f3f0eb] px-8 py-3 rounded-md transition-colors font-medium">
            Take the Ritual Quiz
          </button>
        </div>
      </div>
      {/* Quiz Modal */}
      <RitualQuiz isOpen={showQuiz} onClose={() => setShowQuiz(false)} />
    </div>;
}